<template>
  <div class="statistics-page">
    <!-- 面包屑导航 -->
    <a-breadcrumb class="page-breadcrumb">
      <a-breadcrumb-item>
        <router-link to="/statistics">统计分析中心</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>轮回数据分析</a-breadcrumb-item>
      <a-breadcrumb-item>轮回效率分析</a-breadcrumb-item>
    </a-breadcrumb>

    <!-- 页面标题 -->
    <div class="dashboard-header">
      <div class="header-content">
        <div class="ancient-title">轮回效率分析</div>
        <div class="header-subtitle">阴曹地府 · 转世流程优化</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">⚊</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 核心指标卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card efficiency-score">
            <div class="stat-icon">
              <DashboardOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">综合效率指数</div>
              <div class="stat-value">{{ efficiencyScore }}</div>
              <div class="stat-label">优秀水平</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card avg-time">
            <div class="stat-icon">
              <ClockCircleOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">平均处理时间</div>
              <div class="stat-value">{{ avgProcessTime }}</div>
              <div class="stat-label">天</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card throughput">
            <div class="stat-icon">
              <RocketOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">日均处理量</div>
              <div class="stat-value">{{ dailyThroughput }}</div>
              <div class="stat-label">案例</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card utilization">
            <div class="stat-icon">
              <FundProjectionScreenOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">资源利用率</div>
              <div class="stat-value">{{ resourceUtilization }}%</div>
              <div class="stat-label">高效运转</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 主要图表区域 -->
    <div class="main-content">
      <a-row :gutter="[32, 32]" class="content-grid">
        <!-- 效率趋势分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="轮回效率趋势分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="trendPeriod" style="width: 120px">
                <a-select-option value="7">近7天</a-select-option>
                <a-select-option value="30">近30天</a-select-option>
                <a-select-option value="90">近3月</a-select-option>
                <a-select-option value="365">近1年</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="efficiencyTrendOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 流程耗时分析 -->
        <a-col :xs="24" :lg="12">
          <a-card title="流程环节耗时分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-select v-model:value="processType" style="width: 120px">
                <a-select-option value="average">平均耗时</a-select-option>
                <a-select-option value="median">中位数</a-select-option>
                <a-select-option value="max">最长耗时</a-select-option>
              </a-select>
            </template>
            <div class="echarts-container">
              <v-chart :option="processTimeOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 效率瓶颈分析 -->
        <a-col :xs="24">
          <a-card title="效率瓶颈识别与分析" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="bottleneckView" style="width: 120px">
                  <a-select-option value="frequency">频次分析</a-select-option>
                  <a-select-option value="impact">影响程度</a-select-option>
                  <a-select-option value="resolution">解决时间</a-select-option>
                </a-select>
                <a-button @click="exportBottleneckData">
                  <DownloadOutlined />
                  导出分析
                </a-button>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="bottleneckAnalysisOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 部门效率对比 -->
        <a-col :xs="24" :lg="14">
          <a-card title="部门效率对比分析" :bordered="false" class="chart-card">
            <div class="echarts-container">
              <v-chart :option="departmentComparisonOption" style="height: 400px" />
            </div>
          </a-card>
        </a-col>

        <!-- 效率分析报告 -->
        <a-col :xs="24" :lg="10">
          <a-card title="效率分析报告" :bordered="false" class="report-card">
            <div class="report-content">
              <div class="report-section">
                <h4>效率评估</h4>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>整体效率优良</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator positive"></div>
                  <span>处理速度稳定</span>
                </div>
                <div class="status-item">
                  <div class="status-indicator warning"></div>
                  <span>部分环节待优化</span>
                </div>
              </div>

              <div class="report-section">
                <h4>主要瓶颈</h4>
                <ul class="trend-list">
                  <li>审核环节耗时较长</li>
                  <li>资料收集效率偏低</li>
                  <li>系统性能需提升</li>
                  <li>人员配置需优化</li>
                </ul>
              </div>

              <div class="report-section">
                <h4>优化建议</h4>
                <ul class="suggestion-list">
                  <li>简化审核流程</li>
                  <li>数字化转型升级</li>
                  <li>增加技术投入</li>
                  <li>提升人员技能</li>
                </ul>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 效率热力图 -->
        <a-col :xs="24">
          <a-card title="部门效率时段热力图" :bordered="false" class="chart-card">
            <template #extra>
              <a-space>
                <a-select v-model:value="heatmapMetric" style="width: 120px">
                  <a-select-option value="efficiency">效率指数</a-select-option>
                  <a-select-option value="workload">工作负荷</a-select-option>
                  <a-select-option value="quality">质量得分</a-select-option>
                </a-select>
                <a-select v-model:value="heatmapPeriod" style="width: 100px">
                  <a-select-option value="week">本周</a-select-option>
                  <a-select-option value="month">本月</a-select-option>
                </a-select>
              </a-space>
            </template>
            <div class="echarts-container">
              <v-chart :option="efficiencyHeatmapOption" style="height: 300px" />
            </div>
          </a-card>
        </a-col>
      </a-row>
    </div>

    <!-- 详细数据表格 -->
    <div class="table-section">
      <a-card title="轮回效率详细统计" :bordered="false">
        <template #extra>
          <a-space>
            <a-input-search v-model:value="searchKeyword" placeholder="搜索部门或指标" style="width: 200px" @search="handleSearch" />
            <a-button @click="exportData">
              <ExportOutlined />
              导出全部
            </a-button>
          </a-space>
        </template>
        <a-table :columns="tableColumns" :data-source="tableData" :pagination="tablePagination" :loading="tableLoading" :scroll="{ x: 1800 }" @change="handleTableChange" />
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { message } from 'ant-design-vue'
import { DashboardOutlined, ClockCircleOutlined, RocketOutlined, FundProjectionScreenOutlined, DownloadOutlined, ExportOutlined } from '@ant-design/icons-vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart, PieChart, HeatmapChart, RadarChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, VisualMapComponent } from 'echarts/components'
import VChart from 'vue-echarts'

// 注册 ECharts 组件
use([CanvasRenderer, LineChart, BarChart, PieChart, HeatmapChart, RadarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, ToolboxComponent, VisualMapComponent])

// 响应式数据
const loading = ref(false)
const trendPeriod = ref('30')
const processType = ref('average')
const bottleneckView = ref('frequency')
const heatmapMetric = ref('efficiency')
const heatmapPeriod = ref('week')
const searchKeyword = ref('')
const tableLoading = ref(false)

// 核心指标数据
const efficiencyScore = ref(87.3)
const avgProcessTime = ref(15.6)
const dailyThroughput = ref('3,247')
const resourceUtilization = ref(84.2)

// 表格配置
const tableColumns = reactive([
  {
    title: '部门',
    dataIndex: 'department',
    key: 'department',
    fixed: 'left',
    width: 120
  },
  {
    title: '效率指数',
    dataIndex: 'efficiency',
    key: 'efficiency',
    sorter: true,
    render: (value) => `${value}`
  },
  {
    title: '处理量',
    dataIndex: 'throughput',
    key: 'throughput',
    sorter: true
  },
  {
    title: '平均耗时',
    dataIndex: 'avgTime',
    key: 'avgTime',
    sorter: true,
    render: (value) => `${value}天`
  },
  {
    title: '质量得分',
    dataIndex: 'quality',
    key: 'quality',
    sorter: true,
    render: (value) => `${value}分`
  },
  {
    title: '资源利用率',
    dataIndex: 'utilization',
    key: 'utilization',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '瓶颈次数',
    dataIndex: 'bottlenecks',
    key: 'bottlenecks',
    sorter: true
  },
  {
    title: '本月改进',
    dataIndex: 'improvement',
    key: 'improvement',
    sorter: true,
    render: (value) => `${value}%`
  },
  {
    title: '效率趋势',
    dataIndex: 'trend',
    key: 'trend',
    render: (value) => {
      const color = value > 0 ? '#52c41a' : value < 0 ? '#ff4d4f' : '#1890ff'
      const icon = value > 0 ? '↗' : value < 0 ? '↘' : '→'
      return {
        children: `${icon} ${Math.abs(value)}%`,
        style: { color }
      }
    }
  }
])

const tableData = ref([])
const tablePagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total) => `共 ${total} 条记录`
})

// 图表配置项
const efficiencyTrendOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['效率指数', '处理量', '质量得分'],
    textStyle: { color: '#e6f7ff' }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: generateTimeData(),
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '指数/得分',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '处理量',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '效率指数',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#52c41a', width: 3 },
      data: generateEfficiencyData()
    },
    {
      name: '处理量',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      lineStyle: { color: '#1890ff', width: 3 },
      data: generateThroughputData()
    },
    {
      name: '质量得分',
      type: 'line',
      smooth: true,
      lineStyle: { color: '#722ed1', width: 3 },
      data: generateQualityData()
    }
  ]
}))

const processTimeOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: ['资料收集', '初审核查', '业力评估', '道路确定', '审批决定', '执行转世', '后续跟踪'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: {
    type: 'value',
    name: '时间(天)',
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' },
    splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
  },
  series: [
    {
      name: '耗时分析',
      type: 'bar',
      data: [3.2, 4.8, 5.1, 2.3, 3.7, 1.8, 2.1],
      itemStyle: {
        color: (params) => {
          const colors = ['#52c41a', '#1890ff', '#722ed1', '#fa8c16', '#eb2f96', '#13c2c2', '#f5222d']
          return colors[params.dataIndex]
        }
      }
    }
  ]
}))

const bottleneckAnalysisOption = computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['出现频次', '影响程度', '解决效率'],
    textStyle: { color: '#e6f7ff' }
  },
  xAxis: {
    type: 'category',
    data: ['系统响应慢', '人员不足', '流程复杂', '数据不全', '沟通延迟', '技术故障', '审核严格'],
    axisLine: { lineStyle: { color: '#40a9ff' } },
    axisLabel: { color: '#91d5ff' }
  },
  yAxis: [
    {
      type: 'value',
      name: '频次/程度',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { lineStyle: { color: '#1890ff', opacity: 0.3 } }
    },
    {
      type: 'value',
      name: '解决效率(%)',
      axisLine: { lineStyle: { color: '#40a9ff' } },
      axisLabel: { color: '#91d5ff' },
      splitLine: { show: false }
    }
  ],
  series: [
    {
      name: '出现频次',
      type: 'bar',
      data: [45, 38, 52, 29, 33, 15, 41],
      itemStyle: { color: '#ff4d4f' }
    },
    {
      name: '影响程度',
      type: 'bar',
      data: [8.2, 7.5, 9.1, 6.3, 5.8, 4.2, 7.8],
      itemStyle: { color: '#fa8c16' }
    },
    {
      name: '解决效率',
      type: 'line',
      yAxisIndex: 1,
      data: [72, 68, 65, 85, 78, 92, 70],
      lineStyle: { color: '#52c41a', width: 3 },
      itemStyle: { color: '#52c41a' }
    }
  ]
}))

const departmentComparisonOption = computed(() => ({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['效率指数', '处理量', '质量得分', '资源利用率'],
    textStyle: { color: '#e6f7ff' }
  },
  radar: {
    indicator: [
      { name: '审核部', max: 100 },
      { name: '评估部', max: 100 },
      { name: '执行部', max: 100 },
      { name: '监督部', max: 100 },
      { name: '技术部', max: 100 },
      { name: '协调部', max: 100 }
    ],
    name: {
      textStyle: { color: '#91d5ff' }
    },
    splitLine: {
      lineStyle: { color: '#40a9ff', opacity: 0.5 }
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(24, 144, 255, 0.1)', 'rgba(24, 144, 255, 0.05)']
      }
    },
    axisLine: {
      lineStyle: { color: '#40a9ff' }
    }
  },
  series: [
    {
      name: '部门效率对比',
      type: 'radar',
      data: [
        {
          value: [85, 78, 92, 88, 82, 75],
          name: '效率指数',
          areaStyle: { color: 'rgba(82, 196, 26, 0.3)' }
        },
        {
          value: [78, 85, 88, 80, 92, 83],
          name: '处理量',
          areaStyle: { color: 'rgba(24, 144, 255, 0.3)' }
        },
        {
          value: [88, 82, 85, 90, 78, 86],
          name: '质量得分',
          areaStyle: { color: 'rgba(114, 46, 209, 0.3)' }
        },
        {
          value: [82, 88, 80, 85, 95, 78],
          name: '资源利用率',
          areaStyle: { color: 'rgba(250, 140, 22, 0.3)' }
        }
      ]
    }
  ]
}))

const efficiencyHeatmapOption = computed(() => {
  const departments = ['审核部', '评估部', '执行部', '监督部', '技术部', '协调部']
  const hours = Array.from({ length: 24 }, (_, i) => `${i}时`)
  const data = []

  departments.forEach((dept, deptIndex) => {
    hours.forEach((hour, hourIndex) => {
      const efficiency = 60 + Math.random() * 35
      data.push([hourIndex, deptIndex, Math.round(efficiency * 10) / 10])
    })
  })

  return {
    tooltip: {
      position: 'top'
    },
    grid: {
      height: '60%',
      top: '10%'
    },
    xAxis: {
      type: 'category',
      data: hours,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    yAxis: {
      type: 'category',
      data: departments,
      splitArea: {
        show: true
      },
      axisLabel: { color: '#91d5ff' }
    },
    visualMap: {
      min: 60,
      max: 95,
      calculable: true,
      orient: 'horizontal',
      left: 'center',
      bottom: '15%',
      inRange: {
        color: ['#52c41a', '#1890ff', '#722ed1', '#fa8c16']
      },
      textStyle: { color: '#e6f7ff' }
    },
    series: [
      {
        name: '效率指数',
        type: 'heatmap',
        data: data,
        label: {
          show: false
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
})

// 数据生成函数
function generateTimeData() {
  const days = parseInt(trendPeriod.value)
  const data = []
  const currentDate = new Date()

  for (let i = days - 1; i >= 0; i--) {
    const date = new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000)
    if (days <= 30) {
      data.push(`${date.getMonth() + 1}/${date.getDate()}`)
    } else {
      data.push(`${date.getFullYear()}年${date.getMonth() + 1}月`)
    }
  }
  return data
}

function generateEfficiencyData() {
  const timeData = generateTimeData()
  const data = []
  let baseValue = 85

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 6
    data.push(Math.round(Math.max(70, Math.min(95, baseValue)) * 10) / 10)
  })
  return data
}

function generateThroughputData() {
  const timeData = generateTimeData()
  const data = []
  let baseValue = 3200

  timeData.forEach(() => {
    baseValue += Math.random() * 800 - 400
    data.push(Math.round(Math.max(2000, Math.min(4000, baseValue))))
  })
  return data
}

function generateQualityData() {
  const timeData = generateTimeData()
  const data = []
  let baseValue = 88

  timeData.forEach(() => {
    baseValue += (Math.random() - 0.5) * 4
    data.push(Math.round(Math.max(80, Math.min(95, baseValue)) * 10) / 10)
  })
  return data
}

// 生成表格数据
function generateTableData() {
  const departments = ['审核部', '评估部', '执行部', '监督部', '技术部', '协调部']

  return departments.map((dept, index) => {
    return {
      key: index,
      department: dept,
      efficiency: (80 + Math.random() * 15).toFixed(1),
      throughput: (Math.random() * 1000 + 500).toFixed(0),
      avgTime: (12 + Math.random() * 8).toFixed(1),
      quality: (85 + Math.random() * 10).toFixed(1),
      utilization: (75 + Math.random() * 20).toFixed(1),
      bottlenecks: Math.floor(Math.random() * 20 + 5),
      improvement: (Math.random() * 15 + 2).toFixed(1),
      trend: (Math.random() * 10 - 5).toFixed(1)
    }
  })
}

// 事件处理函数
const handleSearch = (value) => {
  console.log('搜索:', value)
}

const handleTableChange = (pagination, filters, sorter) => {
  tablePagination.current = pagination.current
  tablePagination.pageSize = pagination.pageSize

  if (sorter.field) {
    console.log('排序:', sorter)
  }
}

const exportBottleneckData = () => {
  message.success('瓶颈分析数据导出成功')
}

const exportData = () => {
  message.success('全部数据导出成功')
}

// 监听器
watch(trendPeriod, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
})

watch(processType, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 800)
})

watch(bottleneckView, () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 600)
})

// 组件挂载
onMounted(async () => {
  loading.value = true

  try {
    await new Promise((resolve) => setTimeout(resolve, 1000))

    tableData.value = generateTableData()
    tablePagination.total = tableData.value.length
  } catch (error) {
    message.error('数据加载失败')
  } finally {
    loading.value = false
  }
})
</script>

<style scoped>
/* 复用通用样式 */
.statistics-page {
  min-height: 100vh;
  padding: 24px;
  color: #e6f7ff;
}

.page-breadcrumb {
  margin-bottom: 24px;
}

.page-breadcrumb .ant-breadcrumb-link {
  color: #91d5ff;
}

.dashboard-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 0;
  background: linear-gradient(45deg, rgba(24, 144, 255, 0.1), rgba(82, 196, 26, 0.1));
  border-radius: 16px;
  border: 1px solid rgba(24, 144, 255, 0.3);
}

.header-content {
  margin-bottom: 20px;
}

.ancient-title {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(45deg, #40a9ff, #52c41a, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 8px;
  text-shadow: 0 0 30px rgba(64, 169, 255, 0.5);
}

.header-subtitle {
  font-size: 18px;
  color: #91d5ff;
  opacity: 0.8;
}

.header-decoration {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.decoration-line {
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40a9ff, transparent);
}

.decoration-symbol {
  font-size: 24px;
  color: #40a9ff;
  text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
}

.stats-section {
  margin-bottom: 32px;
}

.stats-grid .ant-col {
  margin-bottom: 20px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.stat-card:hover::before {
  transform: translateX(100%);
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border-color: rgba(64, 169, 255, 0.5);
}

.stat-icon {
  font-size: 32px;
  padding: 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.efficiency-score .stat-icon {
  background: linear-gradient(45deg, #52c41a, #73d13d);
  color: white;
}

.avg-time .stat-icon {
  background: linear-gradient(45deg, #1890ff, #40a9ff);
  color: white;
}

.throughput .stat-icon {
  background: linear-gradient(45deg, #722ed1, #9254de);
  color: white;
}

.utilization .stat-icon {
  background: linear-gradient(45deg, #fa8c16, #ffa940);
  color: white;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #91d5ff;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 28px;
  font-weight: bold;
  color: #e6f7ff;
  line-height: 1;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: #52c41a;
}

.main-content {
  margin-bottom: 32px;
}

.content-grid .ant-col {
  margin-bottom: 32px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
}

.chart-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.chart-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

.echarts-container {
  padding: 16px;
}

.report-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  height: 400px;
}

.report-card .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.report-card .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.report-card .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
  height: calc(100% - 56px);
  overflow-y: auto;
}

.report-content {
  padding: 16px;
}

.report-section {
  margin-bottom: 24px;
}

.report-section h4 {
  color: #40a9ff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  border-left: 3px solid #40a9ff;
  padding-left: 8px;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  color: #e6f7ff;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.status-indicator.positive {
  background: #52c41a;
  box-shadow: 0 0 6px rgba(82, 196, 26, 0.8);
}

.status-indicator.neutral {
  background: #1890ff;
  box-shadow: 0 0 6px rgba(24, 144, 255, 0.8);
}

.status-indicator.warning {
  background: #fa8c16;
  box-shadow: 0 0 6px rgba(250, 140, 22, 0.8);
}

.trend-list,
.suggestion-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.trend-list li,
.suggestion-list li {
  color: #e6f7ff;
  font-size: 14px;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

.trend-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #52c41a;
}

.suggestion-list li::before {
  content: '※';
  position: absolute;
  left: 0;
  color: #40a9ff;
}

.table-section {
  margin-top: 32px;
}

.table-section .ant-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.table-section .ant-card-head {
  background: rgba(24, 144, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-section .ant-card-head-title {
  color: #e6f7ff;
  font-weight: 600;
}

.table-section .ant-card-body {
  background: rgba(0, 0, 0, 0.2);
}

:deep(.ant-table) {
  background: transparent;
}

:deep(.ant-table-thead > tr > th) {
  background: rgba(24, 144, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr > td) {
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #e6f7ff;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: rgba(24, 144, 255, 0.1);
}

:deep(.ant-pagination) {
  text-align: center;
  margin-top: 24px;
}

:deep(.ant-pagination .ant-pagination-item) {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:deep(.ant-pagination .ant-pagination-item a) {
  color: #e6f7ff;
}

:deep(.ant-pagination .ant-pagination-item-active) {
  background: #1890ff;
  border-color: #1890ff;
}

:deep(.ant-pagination .ant-pagination-item-active a) {
  color: white;
}

@media (max-width: 768px) {
  .ancient-title {
    font-size: 32px;
  }

  .header-subtitle {
    font-size: 16px;
  }

  .stat-value {
    font-size: 24px;
  }

  .echarts-container {
    padding: 8px;
  }
}
</style>
